<template>
	<kb-layout>
		<view class="login_container">
			<view class="headlogo">
				<u-image :src="ee.account?.logo" width="60" height="60"></u-image>
			</view>
			<!-- 头部背景图结束 -->
			<div class="login_container_content">
				<div class="login_container_content_title">
					<view class="name">绑定</view>
					<view class="span">手机号绑定登录</view>
				</div>

				<div class="login_container_content_form">

					<view class="slot-content" style="width: 100%;">
						<up-form labelPosition="left" :model="loginData" ref="form1">
							<up-form-item label="" prop="mobile" ref="item1">
								<up-input prefixIcon="phone" prefixIconStyle="font-size: 16px; "
									v-model="loginData.mobile" border="surround" placeholder="请输入您的手机号码"
									:custom-style="{borderColor:''}"></up-input>
								<!-- #ifdef MP-WEIXIN -->
								<template #right>
									<view style="padding-left: 10px;">
										<up-button text="自动获取" open-type='getPhoneNumber'
											@getphonenumber="onGetphonenumber"
											class="u-button u-reset-button u-button--default u-button--square"></up-button>
									</view>
								</template>
								<!-- #endif -->
							</up-form-item>

							<up-form-item>
								<up-input prefixIcon="email" prefixIconStyle="font-size: 16px; "
									v-model="loginData.verycode" border="surround" placeholder="请输入短信验证码"
									:custom-style="{borderColor:''}">
									<template #suffix>
										<up-code ref="uCodeRef" @change="codeChange" seconds="60" startText="点击获取验证码"
											changeText="X秒后重新获取"></up-code>
										<up-button @tap="getCode" :text="tips" :plain="true" size="mini"></up-button>
									</template>
								</up-input>
							</up-form-item>
						</up-form>
					</view>


					<div class="login_container_content_form_agreen privacy_agreement">
						<div class="privacy_agreement_content">

							<view class="u-flex align-center">
								<up-checkbox :customStyle="{marginBottom: '8px'}" label="请阅读并勾选" name="agree" usedAlone
									v-model:checked="isCheckEd" @change="isCheckEd=!isCheckEd">
								</up-checkbox>
								<!-- <checkbox class="checkbox" :value="isCheckEd" /> -->
								<text @click="showPrivaey">《隐私协议》</text>
							</view>
						</div>
					</div>
				</div>

				<div class="login_container_content_handle">
					<div class="login_primary_button" @click="handleLogin">确定提交</div>
				</div>

			</div>

			<!-- 隐私协议弹出窗口 -->
			<popupSlot v-model:showDetails="showFeePopup" title="隐私协议">
				<template #default>
					<view class="u-content u-padding-25 font-size14">
						<up-parse :tag-style="{ p: 'padding-bottom:30rpx; ' }" :content="privryContent.content"></up-parse>
						<view class="" :style="{height:'30px'}">
							
						</view>
					</view>
				</template>
			</popupSlot>

			<kb-footer :color="ee.bgColor.weight"></kb-footer>
		</view>
	</kb-layout>
</template>

<script>
	import util from '/common/tools/utils';
	import loginInput from './component/loginInput.vue';
	import popupSlot from '../mall/componets/popup-slot.vue';
	import {
		navigateTo,
		Modal,
		Toast,
		cache,
		navigateBack
	} from '/common/tools/uniApi.js';
	
	import {
		pageDetailsByCateId
	}from "@/common/api.js";


	export default {
		components: {
			loginInput,
			popupSlot
		},
		data() {
			return {
				loginData: {
					mobile: '',
					verycode: ''
				},
				cid: '',
				isCheckEd: false, // 是否选中隐私协议
				showFeePopup: false, //弹出隐私协议窗口
				tips: '点击获取验证码',
				privryContent:{}, //隐私条款内容
				 
			};
		},
		onLoad() {

		},
		onUnload() {

		},
		methods: {
			onGetphonenumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.kbutil.getModuleData("webfront/getphone", {
						encrypdata: e.detail.encryptedData,
						ivdata: e.detail.iv,
						code: e.detail.code,
					}).then(ret => {
						if (ret.code) {
							uni.showModal({
								content: "请输入手机号"
							})
						} else {
							this.loginData.mobile = ret.data.phoneNumber
						}
					})
				}

			},
			change(e) {
				console.log(e)
			},
			async handleLogin() {
				if (!this.isCheckEd) {
					Toast('请勾选隐私协议');
					return;
				}
				//#ifdef APP-PLUS

				//#endif 
				this.kbutil.getModuleData("webfront/bindMobile", this.loginData).then(ret => {
					//更改绑定状态  
					cache.set('apiToken', ret.token);
					this.$refs.form1.resetFields();
					uni.reLaunch({
						url:'/pages/index'
					})
				})
			},
			// 勾选隐私协议
			checkoutPrivaey(e) {
				
				console.log(this.isCheckEd)
			},
			// 跳转隐私协议
			showPrivaey() {
				console.log(this.showFeePopup)
				//7是指定的隐私条款分类id=7
				pageDetailsByCateId(7).then(ret=>{
					this.privryContent = ret;
					 this.showFeePopup = !this.showFeePopup;
				}) 
				
			},
			codeChange(text) {
				console.log(text)
				this.tips = text;
			},
			getCode() {
				let uCodeRef = this.$refs['uCodeRef'];
				console.log(uCodeRef)
				if (uCodeRef.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
					});
					util.getModuleData("webfront/sendsms", this.loginData).then(ret => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						uCodeRef.start();
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	};
</script>

<style lang="scss">
	body {
		background: #fff;
	}

	.headlogo {
		padding-top: 30px;
		display: flex;
		justify-content: center;
	}

	.login_container {
		background: #fff;

		&_content {

			padding: 30px;
			background: #fff;

			border-radius: 20rpx;

			&_title {
				text-align: left;
				margin-bottom: 54rpx;

				.name {

					font-size: 18px;
					font-weight: 600;
				}

				.span {
					font-size: 14px;
					color: #999;
				}

			}

			&_handle {
				margin-top: 115rpx;

				.login_primary_button {
					font-size: 15px;
					width: 100%;
					height: 82rpx;
					background: linear-gradient(-90deg,$u-primary,$u-primary-dark);
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
			}

			&_form {

				&_input {
					border-radius: 49px;
					border: 1px solid #dbdbdb;
					margin-bottom: 20px;
					padding: 0px 20px;
				}
			}

			// content end
		}
	}

	.privacy_agreement {
		margin-top: 30rpx;

		&_content {
			font-size: 28rpx;
			color: #999;

			.checkbox {
				transform: scale(0.7);
			}

			text {
				color:$u-primary;
			}
		}
	}

	.login-to-set-domin-name {
		font-size: 20rpx;
		padding-top: 40rpx;
		text-align: center;
	}
 
</style>